---
icon: TailwindIcon
---

import { Steps } from 'nextra/components'

# Tailwind CSS

Tailwind CSS is a CSS framework that provides a set of pre-defined CSS classes
to quickly style elements.

<Steps>

## Follow the official guide

Follow the official
[Tailwind CSS guide for Next.js](https://tailwindcss.com/docs/guides/nextjs) to
set up Tailwind CSS for your project.

## Create the `globals.css` file

Import Tailwind CSS into `globals.css`:

```css filename="globals.css"
@import 'tailwindcss';

/* Optional: import Nextra theme styles */
@import 'nextra-theme-docs/style.css'; /* or nextra-theme-blog/style.css */

@variant dark (&:where(.dark *));
```

## Import styles in the root layout

To apply the styles globally, import the `globals.css` file in your root layout
file:

```jsx filename="app/layout.jsx"
import '../path/to/your/globals.css'

export default async function RootLayout({ children }) {
  // ... Your layout logic here
}
```

</Steps>
